<script setup lang="ts">
  import { reactive, ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { login } from '@/api'
  import {
    setUserInfo,
    removeUserInfo,
    setRememberUser,
    removeRememberUser,
    getRememberUser
  } from '@/utils'
  import { useUserStore } from '@/stores/user-store'

  const router = useRouter()
  const { setUser } = useUserStore()

  const rLogin = reactive({ username: '', password: '' })
  const rememberRef = ref(false)
  const cDisable = computed(() => rLogin.username.length === 0 || rLogin.password.length === 0)

  function onLogin() {
    if (cDisable.value) {
      return
    }
    login(rLogin.username, rLogin.password)
      .then(async res => {
        if (res.data && res.data.code === 200 && res.data.data) {
          const isRemember = rememberRef.value
          const username = isRemember ? rLogin.username : ''
          const password = isRemember ? rLogin.password : ''

          setUser(res.data.data)
          setUserInfo(res.data.data)

          if (rememberRef.value) {
            setRememberUser({ isRemember, username, password })
          } else {
            removeRememberUser()
          }

          let redirect = router.currentRoute.value.query.redirect as string
          if (/^https?:/i.test(redirect)) {
            const oUrl = new URL(redirect)
            redirect = oUrl.hash.slice(1)
          }

          await router.push({ path: redirect?.toString() || '/' })
        }
      })
      .catch(error => {
        setUser()
        removeUserInfo()
        console.log('登录错误：', error)
      })
  }
  function initLogin() {
    const oUser = getRememberUser()
    if (oUser) {
      const { isRemember, username, password } = oUser
      rememberRef.value = isRemember
      rLogin.username = username
      rLogin.password = password
    }
  }

  initLogin()
</script>

<template>
  <div class="w-screen h-screen bg-white ud-page flex">
    <q-img class="flex-1 w-full h-full" src="~assets/images/login.jpg" fit="cover"></q-img>
    <div class="w-[30%] flex flex-col px-10">
      <div class="flex-1 text-[#2265D4] text-6xl pt-10">LOGO</div>
      <div class="flex-[2]">
        <ul class="list-none m-0 p-0">
          <li class="text-[40px]">WELCOME</li>
          <li class="text-[32px] mt-3 mb-5">XXXXXX租房管理系统</li>
          <li class="my-7">
            <q-input
              placeholder="请输入账号"
              lazy-rules
              :rules="[val => (val && val.length > 0) || '请输入账号']"
              filled
              v-model="rLogin.username" />
          </li>
          <li>
            <q-input
              v-model="rLogin.password"
              type="password"
              filled
              placeholder="请输入密码"
              lazy-rules
              :rules="[val => (val && val.length > 0) || '请输入密码']" />
          </li>
          <li>
            <q-checkbox
              class="text-[#999] text-sm font-normal"
              v-model="rememberRef"
              label="记住用户名" />
          </li>
          <li class="mt-6">
            <q-btn
              unelevated
              :disable="cDisable"
              rounded
              color="primary"
              size="lg"
              class="w-full"
              @click.stop="onLogin"
              label="登录" />
          </li>
        </ul>
      </div>
      <div class="flex-1 flex flex-col items-center justify-end">
        <p class="text-xs font-normal">
          XXXXXXX有限公司 @Copyright Shanghai Rensoft Technology Co., Ltd
        </p>
        <p class="text-xs font-normal">2020-2023 | 沪ICP备17038813号-2</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .ud-page {
    font-family:
      PingFangSC,
      PingFang SC,
      MicrosoftYaHei;
    font-weight: 600;
    font-size: 32px;
    color: #000;
  }
</style>
